<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>序号号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="(value,key) in users">
					<td>{{key}}</td>
					<td>{{value.id}}</td>
					<td>{{value.pname}}</td>
					<td>{{value.price}}</td>
				</tr>
				
			</table>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
			    users:[
					{id:1,pname:"电视机",price:6000},
					{id:2,pname:"洗衣机",price:4000},
					{id:3,pname:"冰箱",price:7000}
				]
			}
		})
	</script>

</html>